
<template>
  <div class="myLike">

    <div class="van-nav-bar">
      <div class="van-nav-bar-left"
           @click="back ">
        <van-icon size="16"
                  name="arrow-left"
                  color="#FFF" />返回
      </div>
      <div class="van-nav-bar-title">我的收藏</div>
    </div>

    <div class="banner"
         v-if="product.length != 0">
      <img class="auto-img"
           src="../assets/ruixing_a.png"
           alt="">
    </div>

    <lazy-component>
      <div class="product">
        <div class="product-item"
             v-for="(item, index) in product"
             :key="index">
          <div @click="viewGoodsDetails(item.pid)">
            <span class="ithot">hot</span>
            <div>
              <img class="auto-img"
                   :src="item.smallImg"
                   alt=""
                   v-lazy="item.smallImg">
            </div>
            <div class="name">{{item.name}}</div>
            <div class="enname">{{item.enname}}</div>
          </div>

          <div class="price">
            <div class="price-box"> &yen; {{item.price}}</div>
            <div class="delete-box">
              <van-icon size="22"
                        name="delete-o"
                        is-deleting="true"
                        @click="DeleteCollection(item.pid,index)" />
            </div>

          </div>
        </div>
      </div>

    </lazy-component>
    <div v-if="product.length == 0">
      <van-empty description="没有商品" />
    </div>
  </div>
</template>

<script>
export default {
  name: "MyLike",

  data () {
    return {
      product: [],

    }
  },

  created () {
    this.getLike();
  },

  methods: {
    back () {
      //返回上一级
      this.$router.go(-1);
    },

    getLike () {
      this.axios({
        method: 'get',
        url: '/findAllLike'
      }).then(result => {
        if (result.data.code == 2000) {
          this.product = result.data.result;
        }


      })
    },

    //查看商品详情
    viewGoodsDetails (pid) {
      this.$router.push({ name: 'GoodsDetails', params: { pid } })
    },

    DeleteCollection (pid, index) {
      this.$dialog.confirm({
        message: '是否删除?'
      }).then(() => {
        this.axios({
          method: 'post',
          url: '/notlike',
          data: {
            pid
          }
        }).then(result => {

          if (result.data.code == 900 && result.data.result == 1) {

            this.$toast('删除成功');
            this.product.splice(index, 1);
          } else {
            this.$toast('删除失败');
          }
        })
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.myLike {
  padding-top: 60px;
  .van-nav-bar {
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 30px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    background-color: #0c34ba;
    color: #fff;

    .van-nav-bar-title {
      margin-left: 115px;
      font-size: 16px;
    }
    .van-nav-bar-left {
      font-size: 16px;
    }
  }
  .banner {
    width: 100%;
    height: 180px;
  }
  .product {
    display: flex;
    padding: 10px;
    // border-radius: 10px 10px 0 0;
    flex-wrap: wrap;
    .product-item {
      //使最后一个没有右边框
      width: calc(54% - 20px);
      background-color: #fff;
      margin-right: 10px;
      padding: 10px;
      position: relative;
      border-radius: 8px;
      margin-bottom: 10px;
      .ithot {
        position: absolute;
        left: 25px;
        background-color: #0c34ba;
        padding: 5px 5px;
        color: #fff;
        border-radius: 0 0 5px 5px;
      }

      &:nth-child(2n) {
        margin-right: 0;
      }
      .auto-img {
        border-radius: 10px;
        width: 100%;
        height: 100%;
      }
      .name {
        color: #848484;
      }
      .enname {
        color: #848484;
      }
      .price {
        display: flex;
        justify-content: space-between;
        .price-box {
          color: #0c34ba;
          font-weight: bold;
        }
      }
    }
  }
}
</style>